<template>
  <div class="shopcart-container">
    <div class="shopcart">
      <div class="shop-footer">
        <section>
          <ul>
            <li class="shop-footer-item shop-footer-left" @click="toogleShopcart">
              <mu-paper class="demo-paper" circle :zDepth="2" :class="{'demo-paper-active':(totalCount>0)}">
                <!--<img src="../../../../static/img/shopping_cart.png"/>-->
                <div class="num" v-show="totalCount>0">{{totalCount}}</div>
              </mu-paper>
              <p>{{totalPrice | currency('￥')}}</p>
            </li>
            <li class="shop-footer-item shop-footer-right" :class="{'gotopay':(totalCount>0)}" @click="gotoPay">
              去结算
            </li>
          </ul>
        </section>
      </div>
      <transition name="fold">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="empty"><i></i>清空</span>
          </div>
          <div class="list-content" ref="listContent">
            <ul>
              <li class="food" v-for="food in selectFoods">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <!--<cartcontrol @add="addFood" :food="food"></cartcontrol>-->
                  <chose-btn @add="addFood" :food="food"></chose-btn>
                </div>
              </li>
            </ul>
          </div>
          <div class="list-footer">商品尽快送达，请耐心等候...</div>
        </div>
      </transition>
    </div>
    <transition name="fade">
      <div class="list-mask" v-show="listShow" @click="hideList"></div>
    </transition>
  </div>
</template>

<script>
    import ChoseBtn from "./chose-btn";

    export default {
      components: {ChoseBtn},
      name: "shopcart",
      props: {
        selectFoods: {
          type: Array,
          default: () => [{
            count: 0,
            price: 10
          }]
        }
      },
      data () {
        return {
          fold: true
        }
      },
      mounted () {

      },
      methods: {
        addFood (target) {

        },
        toogleShopcart () {
          if (!this.totalCount) {
            return;
          }
          this.fold = !this.fold;
        },
        empty () {
          this.selectFoods.forEach((food) => {
            food.count = 0
          })
        },
        hideList () {
          this.fold = true
        },
        gotoPay () {
          if (this.totalCount>0) {
            window.localStorage.setItem("selectedFoods",JSON.stringify(this.selectFoods))
            this.$router.push('/pay')
          }
        }
      },
      computed: {
        totalPrice () {
          let total = 0;
          this.selectFoods.forEach((food) => {
            total += food.price * food.count;
          });
          return total;
        },
        totalCount() {
          let count = 0;
          this.selectFoods.forEach((food) => {
            count += food.count;
          });
          return count;
        },
        listShow() {
          if (!this.totalCount) {
            this.fold = true;
            return false;
          }
          let show = !this.fold;
          return show;
        }
      }
    }
</script>

<style scoped>
  .shopcart-container{
    position: fixed;
    width: 100%;
    /*height: 100vh;*/
    display: flex;
    /*top: 0;*/
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    flex-direction: column-reverse;
  }
  .shopcart-container .shopcart{
    position: relative;
    z-index: 300;
    display: flex;
    flex-direction: column-reverse;
  }
  .shopcart-container .shop-footer{
    height: 90px;/*rem*/
    background-color: rgba(64, 64, 64, 0.6);
    line-height: 90px;/*rem*/
    position: relative;
    z-index: 301;
  }
  .shopcart-container .shop-footer section ul{
    display: flex;
  }
  .shopcart-container .shop-footer .shop-footer-item{
    color: rgba(255, 255, 255, 0.6);
    position: relative;
  }
  .shopcart-container .shop-footer .gotopay{
    background-color: #61d46f;
    color: #ffffff;
  }
  .shopcart-container .shop-footer .shop-footer-item .demo-paper{
    height: 100px;
    width: 100px;
    position: absolute;
    left: 20px;/*rem*/
    top: -20px;/*rem*/
    border: 10px solid rgba(64, 64, 64, 0.6);/*rem*/
    background-color: rgba(55, 55, 55, 1);
    padding: 15px;/*rem*/
    background-image: url("../../../../static/img/shopping_cart.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .shopcart-container .shop-footer .shop-footer-item .demo-paper .num{
    position: absolute;
    top:-10px;/*rem*/
    right:-10px;/*rem*/
    line-height: 1;/*rem*/
    background-image: linear-gradient(-90deg,#ff7416,#ff3c15 98%);
    border-radius: 50%;
    padding: 5px 10px;/*rem*/
    color: #ffffff;
    font-size: 14px;/*rem*/
  }
  .shopcart-container .shop-footer .shop-footer-item .demo-paper-active{
    background-image: url("../../../../static/img/shoppingCart_active.png");
  }
  /*.shopcart-container .shop-footer .shop-footer-item .demo-paper img{*/
    /*height: 100%;*/
    /*width: 100%;*/
  /*}*/
  .shopcart-container .shop-footer .shop-footer-left{
    font-size: 28px;/*rem*/
    display: flex;
    background-color: rgba(55, 55, 55, 0.4);
    flex: 1;
  }
  .shopcart-container .shop-footer .shop-footer-left p{
    margin-left: 136px;/*rem*/
    color: #ffffff;
  }
  .shopcart-container .shop-footer .shop-footer-right{
    font-size: 26px;/*px*/
    padding: 0 45px;/*rem*/
  }
  .shopcart-container .shopcart-list{
    display: flex;
    flex-direction: column;
    background-color: rgba(245, 245, 245, 1);
    position: relative;
    z-index: 290;
  }
  .shopcart-container .shopcart-list .list-header{
    display: flex;
    color: #666666;
    height: 70px;/*rem*/
    line-height: 70px;/*rem*/
    padding: 0 35px;/*rem*/
  }
  .shopcart-container .shopcart-list .list-header .title{
    font-size: 28px;/*px*/
    flex: 1;
    font-weight: bold;
    letter-spacing: 4px;
  }
  .shopcart-container .shopcart-list .list-header .empty{
    font-size: 24px;/*px*/
  }
  .shopcart-container .shopcart-list .list-header .empty i{
    display: inline-block;
    height: 30px;/*rem*/
    width: 30px;/*rem*/
    background-image: url("../../../../static/img/del.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 10px;/*rem*/
  }
  .shopcart-container .shopcart-list .list-content{
    background-color: #ffffff;
    padding-left: 35px;/*rem*/
  }
  .shopcart-container .shopcart-list .list-content .food{
    display: flex;
    height: 95px;/*rem*/
    line-height: 95px;/*rem*/
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
  }
  .shopcart-container .shopcart-list .list-content .food .name{
    flex: 1;
    color: #111111;
    font-size: 28px;/*rem*/
  }
  .shopcart-container .shopcart-list .list-content .food .price{
    color: #ec6045;
    font-size: 24px;/*px*/
  }
  .shopcart-container .shopcart-list .list-content .food .cartcontrol-wrapper{
    margin: 0 30px;/*rem*/
  }
  .shopcart-container .shopcart-list .list-footer{
    font-size: 20px;/*px*/
    color: #717171;
    text-align: center;
    height: 50px;/*rem*/
    line-height: 50px;/*rem*/
  }
  .shopcart-container .list-mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(7, 17, 27, 0.6);
  }
  .fold-enter-active,.fold-leave-active{
    transition: all 0.3s linear;
  }
  .fold-enter, .fold-leave-to{
    transform: translate3d(0, 100%, 0);
  }
  .fold-enter-to, .food-leave{
    transform: translate3d(0, 0, 0);
  }
  .fade-enter-active, .fade-leave-active{
    transition: all 0.3s linear;
  }
  .fade-enter,.fade-leave-to{
    opacity: 0;
    background: rgba(7, 17, 27, 0);
  }
</style>
